<template>
	<view class="content">
		<view class="itembox">
			<view class="item" v-for="(item,index) in list" :key="index" @click="alertInfo(index)">
				<view class="left">
					{{item.left}}:
				</view>
				<view class="d-flex space-between align-center">
					<view class="right">
						{{item.right || ''}}
					</view>
					<uni-icons color="#999999" :type="item.icon"></uni-icons>
					<view v-if="!item.icon" style="width: 32rpx;height: 33.6rpx;">
						
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					营业执照
				</view>
				<view class="d-flex space-between align-center">
					<view class="right">
						<img class="licen" :src="picCar" alt="">
					</view>
					<view v-if="!item.icon" style="width: 32rpx;height: 33.6rpx;">
						
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="info">
				<view class="d-flex space-between" style="margin-bottom: 70rpx;">
					<view></view>
					<view class="title">修改密码</view>
					<img @click="closePopUp(0)" class="close-img" :src="closeImg" alt="">
				</view>
				<view class="info-box">
					<view class="phone-box" >
						<input style="background-color: #FFFFFF;" v-model="oldPwd" maxlength="16" type="text" password="true" 
						placeholder-style="password" placeholder="旧密码">
					</view>
					<view class="phone-box">
						<input style="background-color: #FFFFFF;" v-model="newPwd" maxlength="16" type="text" password="true" 
						placeholder-style="password" placeholder="新密码">
					</view>
					<view class="button" @click="alertPwd">
						<view class="appointment">
							确  认
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="phone" type="center">
			<view class="info">
				<view class="d-flex space-between" style="margin-bottom: 70rpx;">
					<view></view>
					<text>手机号修改</text>
					<img @click="closePopUp(1)" class="close-img" :src="closeImg" alt="">
				</view>
				<view class="info-box">
					<view>
						<view class="phone-box">
							<input style="background-color: #FFFFFF;" v-model="phoneNum" type="text" 
							placeholder-style="password" placeholder="新手机号">
						</view>
						<view class="phone-box">
							<input style="background-color: #FFFFFF;" v-model="checkPhone" type="text" 
							placeholder-style="password" placeholder="请再次输入手机号">
						</view>
					</view>
					<view class="button">
						<view class="appointment">
							提  交
						</view>
					</view>
				</view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import request from '../../../requst.js'
	import icons from '../../../common/icons.js'
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniIcons
		},
		data() {
			return {
				list:[
					{
						left:"账号",//userName
						right:null,
						icon:'arrowright',
						show:true
					},
					{
						left:"联系电话",//userPhone
						right:null,
						icon:'arrowright',
						show:true
					},
					{
						left:"企业名称",//enterpriseName
						right:null,
						icon:'',
						
					},
					{
						left:"企业负责人",//enterpriseLeader
						right:null,
						icon:'',
					},
					{
						left:"企业邮箱",//enterpriseMailbox
						right:null,
						icon:'',
					},
					{
						left:"行业分类",//enterpriseLegalPerson
						right:null,
						icon:'',
					},
				],
				oldPwd:null,
				newPwd:null,
				newPwdCheck:null,
				phoneNum:null,
				checkPhone:null,
				userName:null,
				userPassword:null,
				closeImg:icons.icons.close,
				businessLicenseImg:null,
			}
		},
		onLoad(){
			this.getMyInfo(); 
		},
		methods: {
			alertInfo(index){
				var that = this;
				switch(index){
					case 0:
						that.$refs.popup.open();
						break;
					case 1:
						that.$refs.phone.open();
						break;
				}
			},
			closePopUp(index){
				switch(index){
					case 0:
						this.$refs.popup.close();
						break;
					case 1:
						this.$refs.phone.close();
						break;
				}
			},
			//获取个人信息
			getMyInfo(){
				request({
					url:'qijian/personalCentre/userInfo',
					method: 'GET',
					success: res => {
						console.log(res)
						this.list[0].right = res.data.userInfo.userName;
						this.list[1].right = res.data.userInfo.userPhone;
						this.list[2].right = res.data.userInfo.enterpriseName;
						this.list[3].right = res.data.userInfo.enterpriseLeader;
						this.list[4].right = res.data.userInfo.enterpriseMailbox;
						this.list[5].right = res.data.userInfo.enterpriseLegalPerson;
						this.userPassword = res.data.userInfo.userPassword;
						this.businessLicenseImg = icons.iconUrl + "7fbed9df-d514-4ea7-8d56-98f2789bad4c.jpg"
					}
				})
			},
			//修改密码
			alertPwd(){
				request({
					url:'qijian/personalCentre/update',
					data:{
						newpassword:this.newPwd,
						oldpassword:this.oldPwd
					},
					success:res=>{
						console.log(res)
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F0F0F0 !important;
	}
</style>
<style scoped>
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80vw;
		height: 88rpx;
		background: #000000;
		border-radius: 6px;
	}
	.info-box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.appointment{
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
	}
	.phone-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #D6D6D6;
		margin-bottom: 40rpx;
	}
	.close-img{
		width: 28rpx;
		height: 28rpx;
	}
	uni-icons{
		color: #999999 !important;
	}
	.licen{
		width: 126rpx;
		height: 70rpx;
	}
	.right{
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}
	.left{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #666666;
	}
	.justify-content{
		justify-content: center !important; 
	}
	.title{
		font-size: 36rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}
	.password{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-right: 30rpx;
	}
	.pwdFont{
		font-size: 24rpx;
	}
	.info {
		width: 80vw;
		min-height: 35vh;
		background-color: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
		padding: 40rpx;
		border-radius: 12px;
		margin-bottom: 20vh;
	}
	.license{
		padding: 15rpx 30rpx 0 30rpx ;
	}
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 15rpx;
		
	}
	.align-center{
		align-items: center !important;
	}
	.d-flex{
		display: flex !important;
	}
	.space-between{
		justify-content: space-between !important;
	}
	.item{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		width: 92vw;
		border-bottom: 1px solid #EBEBEB;
	}
	.itembox{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
</style>
